<style>
</style>
<!--  -->
<template>
  <div>
    <el-dialog @close="close" title="编辑" :visible.sync="dialogVisible">
      <el-form :model="form" v-loading="loading" @submit.native.prevent>
        <el-form-item label="页面名称" :label-width="formLabelWidth">
          <el-input
            size="medium"
            v-model="form.name"
            style="width: 280px"
            autocomplete="off"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="isOutPage"
          label="外部链接"
          :label-width="formLabelWidth"
        >
          <el-input
            size="medium"
            v-model="form.external"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="isOutPage"
          label="打开方式"
          :label-width="formLabelWidth"
        >
          <el-select size="mini" v-model="form.target" placeholder="请选择">
            <el-option label="当前页面跳转" :value="'_self'"></el-option>
            <el-option label="新打开页面跳转" :value="'_blank'"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
export default {
  data () {
    return {
      page: {},
      form: {
        name: '',
        external: '',
        target: ''
      },
      isOutPage: false,
      formLabelWidth: '120px',
      loading: true,
      dialogVisible: false
    }
  },
  methods: {
    close () {
      this.page = {}
      this.form = {
        name: '',
        external: '',
        target: ''
      }
      this.isOutPage = false
      this.formLabelWidth = '120px'
      this.loading = true
      this.dialogVisible = false
    },
    show (pId) {
      this.dialogVisible = true
      if (pId > 0) {
        this.loading = true
        this.$post('/page/info', { pageId: pId }).then(response => {
          this.loading = false
          if (response && response.id) {
            this.page = response
          }
          if (this.page && this.page.id) {
            this.form.name = this.page.name
            if (this.page.type === 3) {
              this.isOutPage = true
              // 是否是外部链接页面
              let url = this.page.url
              if (url) {
                let json = JSON.parse(url)
                this.form.external = json && json.external ? json.external : ''
              }
              this.form.target = this.page.target
            } else {
              this.isOutPage = false
            }
          }
        })
      }
    },
    save () {
      let param = {
        id: this.page.id,
        name: this.form.name,
        target: this.form.target,
        url: this.page.type === 3 ? this.getUrl() : ''
      }
      this.loading = true
      this.$post('/page/updata', param).then(response => {
        this.loading = false
        if (response && response.id) {
          // 刷新页面菜单数据
          PubSub.publish(PubsubType.PUBSUB_REFRENCE_NAVIGATION_INFO, () => {
            this.dialogVisible = false
            // 刷新页面部分的渲染
            // PubSub.publish(PubsubType.PUBSUB_DESIGN_REFRESH_PAGE)
          })
          // 重新渲染页面的导航部分
          PubSub.publish(PubsubType.PUBSUB_RERENDER_NAVIGATION)
          this.cancel()
        }
      })
    },
    getUrl () {
      let url = this.page.url
      let json = JSON.parse(url)
      json.external = this.form.external
      return JSON.stringify(json)
    }
  }
}
</script>
